<template>
    <div class="member">
        <el-form :model="setState" :rules="rules">
            <el-form-item label="领券是否需要手机号" label-width="180" prop="getCouponNeedPhone">
                <el-select v-model="setState.getCouponNeedPhone">
                    <el-option label="是" value="true" />
                    <el-option label="否" value="false" />
                </el-select>
            </el-form-item>
            <el-form-item label="提交订单是否需要手机号" label-width="180" prop="submitOrderNeedPhone">
                <el-select v-model="setState.submitOrderNeedPhone">
                    <el-option label="是" value="true" />
                    <el-option label="否" value="false" />
                </el-select>
            </el-form-item>
            <el-form-item label="登录是否需要手机号" label-width="180" prop="loginNeedPhone">
                <el-select v-model="setState.loginNeedPhone">
                    <el-option label="是" value="true" />
                    <el-option label="否" value="false" />
                </el-select>
            </el-form-item>
            <el-form-item label-width="60">
                <span class="dialog-footer">
                    <el-button @click="setOK" type="primary">确定</el-button>
                    <el-button @click="cancel">取消</el-button>
                </span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { updateSet } from '@/api/set';
import { useRouter } from 'vue-router';

const setState = ref({
    loginNeedPhone: '是', //登录是否需要手机号
    getCouponNeedPhone: '否', //领券是否需要手机号
    submitOrderNeedPhone: '否', //提交订单是否需要手机号
    id: 1,
});

// 规则
const rules = reactive({
    getCouponNeedPhone: [{ required: true, trigger: 'blur' }],
    submitOrderNeedPhone: [{ required: true, trigger: 'blur' }],
    loginNeedPhone: [{ required: true, trigger: 'blur' }],
});
// 确定按钮
const setOK = async () => {
    const { id, ...postdate } = setState.value;
    const res = await updateSet(id, postdate);
    const { status } = res;
    if (status === 200) {
        ElMessage.success('保存成功');
    }
};

const router = useRouter();
// 点击取消会跳转到首页
const cancel = () => {
    router.push('./index');
};
</script>

<style scoped>
.member{
    border: 1px solid #ccc;
    padding: 25px 10px 20px 10px;
}
</style>
